<template>
	<el-table :data="tableData.sc" style="width: 100%" max-height="580">
		<el-table-column fixed prop="custmerId" label="编号" width="70" />
		<el-table-column prop="custmerName" label="顾客名称" width="120" />
		<el-table-column prop="regionName" label="地区" width="120" />
		<el-table-column prop="industryName" label="行业" width="120" />
		<el-table-column prop="rId" label="用户等级" width="120" />
		<el-table-column prop="custmerSatisfaction" label="满意度" width="120" />
		<el-table-column prop="custmerCreditworthiness" label="信用度" width="120" />
		<el-table-column prop="custmerAddress" label="地址" width="120" />
		<el-table-column prop="custmerZip" label="邮编" width="120" />
		<el-table-column prop="custmerPhone" label="电话" width="120" />
		<el-table-column prop="custmerFax" label="传真" width="120" />
		<el-table-column prop="custmerUrl" label="网址" width="120" />
		<el-table-column prop="custmerLicense" label="营业执照注册号" width="120" />
		<el-table-column prop="custmerJuridical" label="法人代表" width="120" />
		<el-table-column prop="custmerFund" label="注册资金(万元)" width="120" />
		<el-table-column prop="custmerTurnover" label="年营业额" width="120" />
		<el-table-column prop="custmerBank" label="开户银行" width="120" />
		<el-table-column prop="custmerRent" label="地税登记号" width="120" />
		<el-table-column prop="custmerLrs" label="国税登记号" width="120" />
		<el-table-column prop="custmerManager" label="客户经理" width="120" />
		<el-table-column prop="custmerState" label="状态" width="120" />

		<el-table-column fixed="right" label="操作" width="98" header-align="center">
			<template #default="scope">
				<el-button link type="primary" size="small" @click="updateRow((scope.row))">
					修改
				</el-button>
				<el-button link type="primary" size="small" @click="deleteRow((scope.row))">
					删除
				</el-button>
			</template>
		</el-table-column>
	</el-table>

	<el-button class="mt-4" style="width: 100%" @click="add">添加</el-button>

	<el-dialog v-model="dialogVisible" title="新增客户" width="30%" align-center draggable scroll="true">
		<el-form v-model="form" label-width="27%">

			<el-form-item label="名字">
				<el-input v-model="form.custmerName" placeholder="请选择名字" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="地区">
				<el-select v-model="form.regionName" placeholder="请选择地区">
					<el-option label="重庆" value="重庆" />
					<el-option label="成都" value="成都" />
					<el-option label="云南" value="云南" />
				</el-select>
			</el-form-item>
			<el-form-item label="行业">
				<el-select v-model="form.industryName" placeholder="请选择行业">
					<el-option label="文化传媒" value="文化传媒" />
					<el-option label="教育" value="教育" />
					<el-option label="餐饮" value="餐饮" />
					<el-option label="房地产" value="房地产" />
				</el-select>
			</el-form-item>
			<el-form-item label="等级">
				<el-select v-model="form.rId" placeholder="请选择等级">
					<el-option label="非优先客户" value="非优先客户" />
					<el-option label="普通用户" value="普通用户" />
					<el-option label="重点客户" value="重点客户" />
				</el-select>
			</el-form-item>
			<el-form-item label="满意度">
				<el-select v-model="form.custmerSatisfaction" placeholder="请选择满意度">
					<el-option label="五级" value="五级" />
					<el-option label="四级" value="四级" />
					<el-option label="三级" value="三级" />
					<el-option label="二级" value="二级" />
					<el-option label="一级" value="一级" />
				</el-select>
			</el-form-item>
			<el-form-item label="信用度">
				<el-select v-model="form.custmerCreditworthiness" placeholder="请选择信用度">
					<el-option label="五级" value="五级" />
					<el-option label="四级" value="四级" />
					<el-option label="三级" value="三级" />
					<el-option label="二级" value="二级" />
					<el-option label="一级" value="一级" />
				</el-select>
			</el-form-item>
			<el-form-item label="地址">
				<el-input v-model="form.custmerAddress" placeholder="请输入地址" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="邮编">
				<el-input v-model="form.custmerZip" placeholder="40060" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="电话">
				<el-input v-model="form.custmerPhone" placeholder="请输入电话" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="传真">
				<el-input v-model="form.custmerFax" placeholder="请输入传真" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="网址">
				<el-input v-model="form.custmerUrl" placeholder="www.baidu.com" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="营业执照注册号">
				<el-input v-model="form.custmerLicense" placeholder="请输入营业执照注册号" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="法人">
				<el-input v-model="form.custmerJuridical" placeholder="请输入法人" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="注册资金(万元)">
				<el-input v-model="form.custmerFund" placeholder="注册资金(万元)" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="年营业额(万元)">
				<el-input v-model="form.custmerTurnover" placeholder="年营业额(万元)" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="开户银行">
				<el-input v-model="form.custmerBank" placeholder="开户银行" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="银行账号">
				<el-input v-model="form.custmerRent" placeholder="银行账号" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="国税登记号">
				<el-input v-model="form.custmerLrs" placeholder="国税登记号(84432811)" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="客户经理">
				<el-select v-model="form.custmerManager" placeholder="客户经理">
					<el-option label="小黑" value="小黑" />
					<el-option label="小红" value="小红" />
					<el-option label="小蓝" value="小蓝" />
				</el-select>
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="form.custmerState" placeholder="请输入状态">
					<el-option label="正常" value="正常" />
					<el-option label="流失" value="流失" />
				</el-select>
			</el-form-item>


			<el-form-item>
				<el-button type="primary" @click="onSubmit">新增</el-button>
			</el-form-item>
		</el-form>

	</el-dialog>

	<!-- 修改 -->
	<el-dialog v-model="dialogVisible2" title="修改客户信息" width="30%" align-center draggable scroll="true">
		<el-form v-model="testForm.sc" label-width="27%">
			<el-form-item label="名字">
				<el-input v-model="testForm.sc.custmerName" placeholder="请选择名字" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="地区">
				<el-select v-model="testForm.sc.regionName" placeholder="请选择地区">
					<el-option label="重庆" value="重庆" />
					<el-option label="成都" value="成都" />
					<el-option label="云南" value="云南" />
				</el-select>
			</el-form-item>
			<el-form-item label="行业">
				<el-select v-model="testForm.sc.industryName" placeholder="请选择行业">
					<el-option label="文化传媒" value="文化传媒" />
					<el-option label="教育" value="教育" />
					<el-option label="餐饮" value="餐饮" />
					<el-option label="房地产" value="房地产" />
				</el-select>
			</el-form-item>
			<el-form-item label="等级">
				<el-select v-model="testForm.sc.rId" placeholder="请选择等级">
					<el-option label="非优先客户" value="非优先客户" />
					<el-option label="普通用户" value="普通用户" />
					<el-option label="重点客户" value="重点客户" />
				</el-select>
			</el-form-item>
			<el-form-item label="满意度">
				<el-select v-model="testForm.sc.custmerSatisfaction" placeholder="请选择满意度">
					<el-option label="五级" value="五级" />
					<el-option label="四级" value="四级" />
					<el-option label="三级" value="三级" />
					<el-option label="二级" value="二级" />
					<el-option label="一级" value="一级" />
				</el-select>
			</el-form-item>
			<el-form-item label="信用度">
				<el-select v-model="testForm.sc.custmerCreditworthiness" placeholder="请选择信用度">
					<el-option label="五级" value="五级" />
					<el-option label="四级" value="四级" />
					<el-option label="三级" value="三级" />
					<el-option label="二级" value="二级" />
					<el-option label="一级" value="一级" />
				</el-select>
			</el-form-item>
			<el-form-item label="地址">
				<el-input v-model="testForm.sc.custmerAddress" placeholder="请输入地址" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="邮编">
				<el-input v-model="testForm.sc.custmerZip" placeholder="40060" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="电话">
				<el-input v-model="testForm.sc.custmerPhone" placeholder="请输入电话" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="传真">
				<el-input v-model="testForm.sc.custmerFax" placeholder="请输入传真" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="网址">
				<el-input v-model="testForm.sc.custmerUrl" placeholder="www.baidu.com" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="营业执照注册号">
				<el-input v-model="testForm.sc.custmerLicense" placeholder="请输入营业执照注册号" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="法人">
				<el-input v-model="testForm.sc.custmerJuridical" placeholder="请输入法人" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="注册资金(万元)">
				<el-input v-model="testForm.sc.custmerFund" placeholder="注册资金(万元)" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="年营业额(万元)">
				<el-input v-model="testForm.sc.custmerTurnover" placeholder="年营业额(万元)" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="开户银行">
				<el-input v-model="testForm.sc.custmerBank" placeholder="开户银行" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="银行账号">
				<el-input v-model="testForm.sc.custmerRent" placeholder="银行账号" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="国税登记号">
				<el-input v-model="testForm.sc.custmerLrs" placeholder="国税登记号(84432811)" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="客户经理">
				<el-select v-model="testForm.sc.custmerManager" placeholder="客户经理">
					<el-option label="小黑" value="小黑" />
					<el-option label="小红" value="小红" />
					<el-option label="小蓝" value="小蓝" />
				</el-select>
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="testForm.sc.custmerState" placeholder="请输入状态">
					<el-option label="正常" value="正常" />
					<el-option label="流失" value="流失" />
				</el-select>
			</el-form-item>
	
	
			<el-form-item>
				<el-button type="primary" @click="onSubmit2">提交</el-button>
			</el-form-item>
		</el-form>
	
	</el-dialog>



</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import dayjs from 'dayjs'
	import axios from 'axios'
	import qs from 'qs'
	const dialogVisible = ref(false)
	const dialogVisible2 = ref(false)
	
	const tableData = reactive({});
	// const tableData = ref([{
	// 		custmerId: '',
	// 		custmerName: '',
	// 		regionName: '',
	// 		industryName: '',
	// 		rId: '',
	// 		custmerSatisfaction: '',
	// 		custmerCreditworthiness: '',
	// 		custmerAddress: '',
	// 		custmerZip: '',
	// 		custmerPhone: '',
	// 		custmerFax: '',
	// 		custmerUrl: '',
	// 		custmerLicense: '',
	// 		custmerJuridical: '',
	// 		custmerTurnover: '',
	// 		custmerBank: '',
	// 		custmerRent: '',
	// 		custmerLrs: '',
	// 		custmerManager: '',
	// 		custmerState: '',
	// 	},

	// ])

	const query = () => {
		axios.post("http://localhost:8080/custmer/list", qs.stringify(tableData.qq)).then(res => {
			tableData.sc = res.data.list;
		})
	}
	query()

	const form = reactive({
		custmerId: '',
		custmerName: '',
		regionName: '',
		industryName: '',
		rId: '',
		custmerSatisfaction: '',
		custmerCreditworthiness: '',
		custmerAddress: '',
		custmerZip: '',
		custmerPhone: '',
		custmerFax: '',
		custmerUrl: '',
		custmerLicense: '',
		custmerJuridical: '',
		custmerTurnover: '',
		custmerBank: '',
		custmerRent: '',
		custmerLrs: '',
		custmerManager: '',
		custmerState: '',
	})

	const add = () => {
		dialogVisible.value = true;
	}

	const onSubmit = () => {

		axios.post("http://localhost:8080/custmer/add", qs.stringify(form)).then(res => {
			// console.log(res.date.msg)
			console.log(res.data.msg)
			if (res.data.msg == 'success') {
				ElMessage({
					message: '添加成功！',
					type: 'success',
				})
				query()
				dialogVisible.value = false;
			} else {
				ElMessage({
					message: '请填写完整！',
					type: 'warning',
				})
			}
		})
	}


	const deleteRow = (row) => {
		console.log('click')
		//删除
		console.log(row.custmerState)

		//提示不能删
		let ok = confirm("确定要删除吗？")
		if (ok) {
			//发异步请求删除数据
			axios.post("http://localhost:8080/custmer/delete", qs.stringify({
				custmerId: row.custmerId
			})).then(res => {
				query()
			})
		}
	}
	
	const testForm = reactive({})
	const updateRow = (row) => {
		dialogVisible2.value = true;
		testForm.sc = row;
	}
	
	const onSubmit2 = () => {
		console.log(testForm.sc)
		axios.post("http://localhost:8080/custmer/update", qs.stringify(testForm.sc)).then(res => {
			// console.log(res.date.msg)
			console.log(res.data.msg)
			if (res.data.msg == 'success') {
				ElMessage({
					message: '修改成功！',
					type: 'success',
				})
				query()
				dialogVisible2.value = false;
			} else {
				ElMessage({
					message: '修改失败！',
					type: 'warning',
				})
			}
		})
	}
</script>
